<template>
  <div class="con">
    <!-- <v-chart :options="newOption" ref="aa" :auto-resize="true"  /> -->
    <v-chart :options="newOption" ref="aa" :auto-resize="true" @click="chartClick" />
  </div>
</template>
<script lang="ts">
import { Component, Prop, Vue, Watch } from "vue-property-decorator";
import { EChartOption } from "echarts";
//loadsh
import lodash from "lodash";
@Component
export default class barchart extends Vue {
  @Prop()
  mydata: any;
  public option: EChartOption = {
    grid: {
      left: "5%",
      right: "5%",
      bottom: "0%",
      top: "52%",
      containLabel: true,
    },
    tooltip: {
      trigger: "axis",
      axisPointer: {
        type: "none",
      },
      formatter: function (params: any) {
        return params[0].name + " : " + params[0].value;
      },
    },
    xAxis: {
      show: false,
      type: "value",
    },
    yAxis: [
      {
        type: "category",
        inverse: true,
        axisLabel: {
          show: true,
          color: "#fff",
        },
        splitLine: {
          show: false,
        },
        axisTick: {
          show: false,
        },
        axisLine: {
          show: false,
        },
        // data: ["未巡检", "巡检中", "巡检完成", "巡检失败"],
        data: ["未巡检", "巡检中", "巡检完成"],
      },
      {
        type: "category",
        inverse: true,
        axisTick: "none",
        axisLine: {
          show: false,
        },
        show: true,
        axisLabel: {
          color: "#ffffff",
          fontSize: 12,
        },
        data: ["0", "0", "0", "0"],
      },
    ],
    series: [
      {
        type: "bar",
        zlevel: 1,
        itemStyle: {
          barBorderRadius: 30,
          color: {
            type: "linear",
            x: 0,
            y: 0,
            x2: 1,
            y2: 0,
            colorStops: [
              {
                offset: 0,
                color: "#44E7F5", // 0% 处的颜色
              },
              {
                offset: 1,
                color: "#3473D5", // 100% 处的颜色
              },
            ],
            global: false, // 缺省为 false
          },
        },
        barWidth: 10,
        data: [0, 0, 0, 0],
      },
      {
        type: "bar",
        barWidth: 12,
        barGap: "-110%",
        data: [100, 100, 100, 100],
        itemStyle: {
          color: "rgba(26,61,103,0)",
          barBorderRadius: 30,
          borderWidth: 1,
          borderColor: "rgba(26,61,103,0.6)",
        },
      },
    ],
  };
  get newOption() {
    let option = lodash.cloneDeep(this.option);
    let robotInspection = this.mydata;
      let data = [
        robotInspection.WZX ||0,
        robotInspection.ZXZ||0,
        robotInspection.YZX||0,
        // robotInspection.ZXSB||0,
        // robotInspection.YCBG,
      ];
      let max:number=Math.max(...data);
      (option as any).yAxis[1].data = data;
      (option as any).series[0].data = data;
      (option as any).series[1].data =  data.map(()=>{return max+1});
    return option;
  }
  public chartClick(val: Object): void {
    this.$emit('chartClick',val)
  }
  setClickEvent(){
    let aaa:any=this.$refs.aa
    if(aaa){
      let chart=aaa.chart
      console.log(aaa)
      chart.on('click',(params)=>{
        console.log(params)
      })
    }
  }
  mounted(){
    this.setClickEvent()
  }
}
</script>
<style lang="scss" scoped>
.con {
  width: 100%;
  height: 100%;
  .echarts {
    width: 100%;
    height: 100%;
  }
}
</style>
